<template>
    <ZWDrawer ref="zwRef">
        <div class="container">
            <div class="user-time">
                <el-date-picker
                    v-model="punch_card_time"
                    style="width: 335px"
                    type="daterange"
                    value-format="YYYY-MM-DD"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="changeCradtime">
                </el-date-picker>
            </div>
            <div class="container-table">
                <ZwTable
                    ref="tableRef"
                    class="table-box-detail"
                    tab-h="initial"
                    :fetch-api="fetchApi()"
                    :close-loading="true"
                    :option="tableOption"
                    :fetch-params="state.searchParams">
                </ZwTable>
            </div>
        </div>
    </ZWDrawer>
</template>
<script lang="tsx" setup>
import { ref, reactive, computed, onActivated, onMounted, onUnmounted, nextTick, defineAsyncComponent } from 'vue';
import ZWDrawer from '@/components/ZWDrawer.vue';
import ZwTable from '@/components/zw/table1.0/Table';
import { punchCardRecord } from '@/api/smartMarketing/community/communityCheckIn';
import { deepCopy } from '@/utils/helper';
import { reNderUserDetail, renderGroupDetail } from './longName.tsx';
import { useRoute } from 'vue-router';

const route = useRoute();
const zwRef = ref<HTMLElement | null>(null);
const punch_card_time = ref([]); // 打卡日期
const defaultParams = {
    activity_id: route.query.activity_id, //活动ID
    groupchat_id: 1, //群ID
    wx_external_userid: '', //外部联系人ID
    punch_card_time: [] // 打卡日期
};
const state = reactive({
    searchParams: deepCopy(defaultParams)
});
const tableOption = [
    {
        prop: 'serial_num',
        label: '序号',
        width: 60
    },
    {
        prop: 'nickname',
        label: '用户信息',
        width: 200,
        render: reNderUserDetail
    },
    {
        prop: 'clock_time',
        label: '打卡时间',
        minWidth: 200
    },
    {
        prop: 'is_first_punch',
        label: '是否当天活动首次打卡',
        width: 200,
        render({ row, column, index }: any) {
            return <div>{row.is_first_punch == 1 ? '否' : '是'}</div>;
        }
    },
    {
        prop: 'group_friend_qty',
        label: '打卡群聊',
        width: 300,
        render: renderGroupDetail
    }
];
const fetchApi = () => {
    return punchCardRecord;
};
/**
 * 切换打卡日期
 */
const changeCradtime = () => {
    defaultParams.punch_card_time = punch_card_time.value;
    state.searchParams = { ...deepCopy(defaultParams) };
};
/**
 * 打开打卡记录弹窗
 * @param val 选中列的信息
 */
const openClockRecords = (val: any) => {
    punch_card_time.value = [];
    defaultParams.punch_card_time = [];
    state.searchParams.punch_card_time = [];
    state.searchParams.groupchat_id = val.group_id;
    defaultParams.groupchat_id = val.group_id;
    state.searchParams.wx_external_userid = val.wx_external_userid;
    defaultParams.wx_external_userid = val.wx_external_userid;
    zwRef.value.width = '1000px';
    zwRef.value.title = '打卡记录';
    zwRef.value.isShow = false;
    zwRef.value.drawer = true;
};
defineExpose({
    openClockRecords
});
</script>
<style lang="scss" scoped>
.container {
    height: calc(100vh - 96px);
    display: flex;
    flex-direction: column;

    .user-time {
        height: 32px;
    }

    .container-table {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-sizing: border-box;
        background-color: #fff;
        flex: 1;

        .zw-table {
            display: flex;
            flex-direction: column;
            flex: 1;
            overflow: hidden;

            :deep(.el-table) {
                flex: 1;

                .el-table__empty-block {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }
    }
}
</style>
